Skip to content

feature: hide/show class attributes #658

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom
Closed
wants to merge 1 commit into from
Closed

feature: hide/show class attributes #658

wants to merge 1 commit into from

Conversation

mtbaqer
Copy link

@mtbaqer mtbaqer commented Nov 10, 2022 •
edited by adamwathan
Loading

This is a Draft PR, the purpose of it is to work as a starting point, the code here is nowhere near being production-ready

Given the progress that was made in the area by vscode-inline-fold and vscode-explicit-folding, I wanted to make this Draft PR to provide an approach of implementing hiding and showing class attributes in the tailwind extension. This hopefully works as a starting point for the feature as well as to reopen the discussion on the topic.

Hoping to reopen issue #313 to work as a place for the conceptual discussion while keeping it here only for implementation details.

Disclaimer: Many elements of this PR were taken from the extensions above with heavy modifications to make them work with the rest of the extension.

Issues

Demo

Demo.mov

Features

Screenshot 2022-11-09 at 20 40 26

Screenshot 2022-11-09 at 20 40 31

  • Multiline fold using VSCode native folding.

Screenshot 2022-11-09 at 20 57 04

Screenshot 2022-11-09 at 20 57 18

  • Toggle command (allowing for a keyboard shortcut) to enable/disable hiding class attributes.
  • Auto show class content when cursor is within range or on selection.
  • Multi-cursor support.
  • Support current tailwindCSS.classAttributes extension setting.
  • New tailwindCSS.experimental.foldClassAttributes settings value to disable the feature.

TODO

  • Support tailwindCSS.includeLanguages setting.
  • Allow an option to disable the auto unfolding, to make classes stay folded until toggled back.
  • Fix known bugs:
    • When user manually unfolds a multiline class attribute, the first line stays inline folded
    • When user disables folding, multiline class attributes folded in documents beside the current one become "normally" folded by VSCode instead of unfolding.
  • Reorganize current code (didn't know where to put the logic, so put everything in one file and added the calls at the very bottom of extension.ts).

@mtbaqer mtbaqer mentioned this pull request Nov 10, 2022
Closed
@kossnocorp
Copy link

I just started working on a similar thing. I'm glad @adamwathan pointed me to it. It's such a fantastic idea, I can't wait for you guys to build it!

@surjithctly
Copy link

@mtbaqer Possible to make sure to see the ="" part all the time? Currently, it feels weird. So it would look like this:

<!-- ⛁ = tailwindcss logo ;) -->

<div class="⛁">
...

<!-- or maybe we could also show the number of classes as well? -->
<!-- [] = nice gray background -->

<div class="[⛁7]">
...

@bradlc
Copy link
Contributor

bradlc commented Nov 11, 2022

Hey @mtbaqer, great work on this, the little Tailwind logo is a nice touch! 👏 I think that HTML attribute folding is a really cool idea, and one that a lot of Tailwind users would appreciate for those long class attributes!

I think there's a couple of reasons that we wouldn't want to add this to Tailwind CSS IntelliSense though:

  1. I still don't think it's possible to build an inline folding extension that we would feel comfortable publishing. In particular existing implementations don't work well when word wrap is enabled. Maybe one day it will be possible (maybe it is now? I would love to be proven wrong), or we'll get first-party support for inline code folding 🤞
  2. Implementation issues aside, this doesn't feel like a feature that belongs in Tailwind CSS IntelliSense. Attribute folding (even class attribute folding specifically) is not a Tailwind-specific feature, so it feels weird to me to include it in a Tailwind-specific extension. I think a standalone extension makes more sense, like vscode-inline-fold.

For those reasons I'm going to close this, I hope that's understandable 🙏

@bradlc bradlc closed this Nov 11, 2022
@mlntr
Copy link

mlntr commented Feb 23, 2024

this doesn't feel like a feature that belongs in Tailwind CSS IntelliSense. Attribute folding (even class attribute folding specifically) is not a Tailwind-specific feature, so it feels weird to me to include it in a Tailwind-specific extension. I think a standalone extension makes more sense, like vscode-inline-fold.

While it may not be Tailwind-only, it's an issue especially common to Tailwind to the point I think it would justify being included as an option. And there are Tailwind-specific aspects, for example, it could possibly be implemented in a way to only hide Tailwind attributes)

Unfortunately vscode-inline-fold's maintainer now declared it dead moalamri/vscode-inline-fold@e61fbfe moalamri/vscode-inline-fold#132 so would be great if this could be reconsidered

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Reviewers
No reviews
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

Successfully merging this pull request may close these issues.

Recolour class text Feature request: toggle show/hide classnames
5 participants
@mtbaqer @kossnocorp @surjithctly @bradlc @mlntr